<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="genusSearch.title"/></title>
    <meta name="heading" content="<fmt:message key='agi'/>"/>
	<style type="text/css">
		div.auto_complete {
          width: 350px;
          background: #fff;
          opacity: 0.9;
        }
        div.auto_complete ul {
          border:1px solid #aaaaaa;
          margin:0;
          padding:0;
          width:100%;
          list-style-type:none;
        }
        div.auto_complete ul li {
          margin:0;
          padding:3px;
        }
        div.auto_complete ul li.selected {
          background-color: #316ac5;
          color: #ffffff;
        }
        div.auto_complete ul strong.highlight {
          color: #800;
          margin:0;
          padding:0;
        }
        tr.homonym td {
        	border: none;
        }
	</style>
</head>

<s:form id="searchForm" action="searchGenus" method="post">
	<input type="text" id="genusName" name="genusName" style="width:300px"/>
	<s:submit cssClass="button" method="search" key="button.search" theme="simple"/>
	<div id="autocomplete_choices" class="auto_complete"></div>
</s:form>
<script type="text/javascript">
	new Ajax.Autocompleter("genusName", "autocomplete_choices", "/autocompleteGenus.html?ajax=true");
</script>

<s:if test="%{groupedGeneraList.size > 1}">
	<table class="table" id="groupedGeneraList">
		<thead>
			<tr>
				<th><fmt:message key="generaSearch.fullScientificName"/></th>
				<th><fmt:message key="generaSearch.sources"/></th>
			</tr>
		</thead>
		<tbody>
			<s:iterator value="groupedGeneraList">
				<s:if test="%{genera.size > 1}">
					<s:set name="rowClassname" value="%{'homonym'}"/>
				</s:if>
				<s:else>
					<s:set name="rowClassname" value="%{'odd'}"/>
				</s:else>
				<s:iterator value="genera">
					<tr class="<s:property value="#rowClassname"/>">
						<s:url id="detailUrl" action="genusDetail">
							<s:param name="id" value="id"/>
						</s:url>

						<td><s:a href="%{detailUrl}"><s:property value="fullScientificName"/></s:a></td>
						<td>
							<s:iterator value="genusUsages">
								<s:if test="%{agiDatasource.logo != null}">
									<img src="/images/<s:property value="agiDatasource.logo"/>"/>
								</s:if>
								<s:else>
									<s:property value="agiDatasource.name"/>
								</s:else>
								<br/>
							</s:iterator>
						</td>
					</tr>
				</s:iterator>
			</s:iterator>
		</tbody>
	</table>

	<script type="text/javascript">
	    highlightTableRows("groupedGeneraList");
	</script>
</s:if>
